<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>登录界面</title>
</head>
<body>
     <!-- 
    form表单
    1.action属性：表单提交的地址，一般指的是后台的url接口地址 
    2.method属性：默认Get方式 ，Get/Post
      Get方式特点：
        1.地址栏会显示表单数据 url?username=李思&password=123# 
        2.不建议使用get方式操作隐秘数据 
        3.不适合提交数据量大的 
      Post方式特点：
        1.地址栏不显示数据 
        2.适合提交隐秘数据，也适合提交大量数据 
  -->
  <form action="#" method="POST">
    <table border="1px" cellspacing="0" cellpadding="5px" align="center">
      <caption><h3>登录</h3></caption>
      <tr>
        <td>姓 名</td>
         <!-- 
            input[type="text"]：文本输入框，用于填写普通文本（如姓名）
            placeholder：输入框为空时显示的提示文字，引导用户输入
            name：表单数据的键名，后端通过 username 接收该输入框的值 
          -->
        <td><input type="text" placeholder="请输入姓名" name="username" /></td>
      </tr>
      <tr>
        <td>密 码</td>
        <td>
             <!-- 
            input[type="password"]：密码输入框，输入内容会隐藏（如圆点/星号）
            placeholder：提示用户填写密码
            name：后端通过 password 接收密码值，配合 POST 保证安全性 
          -->
            <input type="password" placeholder="请输入密码" name="password" /></td>
      </tr>
      <tr align="center">
        <td colspan="2">
             <!-- 
            input[type="submit"]：提交按钮，点击后触发表单提交，把表单数据发往 action 地址
            value：按钮上显示的文字（如“登录”）
            &nbsp;：HTML 空格字符，用于按钮间留白 
          -->
          <input type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
           <!-- 
            input[type="reset"]：重置按钮，点击后清空当前表单所有输入框内容
            value：按钮显示文字（如“重置”） 
          -->
          <input type="reset" value="重置" />
        </td>
      </tr>
    </table>
  </form>
</body>
</html>